<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from "vue-router";
import { logout } from "@/api/quit.js"
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user.js"
import { getMymatchInfor } from '@/api/user.js'

const userId = ref('');
const gerenList = ref([])  // 个人赛列表
const teamList = ref([])   // 团队赛列表

// 获取比赛信息
const list = async () => {
  try {
    const resp = await getMymatchInfor(userId.value);
    gerenList.value = resp.data.gerenList;  // 动态绑定个人赛数据
    teamList.value = resp.data.teamList;         // 动态绑定团队赛数据
    console.log(gerenList.value)
    ElMessage.success("获取数据成功")
  } catch (error) {
    ElMessage.error("数据获取失败");
  }
};

const router = useRouter();

// 返回首页
const backIndex = () => {
  router.push('/')
}

// 跳转到个人信息页面
const goInfo = () => {
  router.push('/user/userInfo')
}

// 退出功能
const userStore = useUserStore();
const quit = () => {
  try {
    logout()  // 后端退出请求
    userStore.clearUserData()  // 清除前端存储数据
    router.push('/')
    ElMessage.success("退出成功")
  } catch (err) {
    ElMessage.error("退出失败! 错误为：" + err.message)
    console.log(err.message)
  }
}

onMounted(() => {
  const params = new URLSearchParams(window.location.search);
  userId.value = params.get('userId');

  if (userId.value) {
    list();
  }
});

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
</script>

<template>
  <el-card class="page-container">
    <div style="display: flex">
      <div class="header" style="height: 70px;font-size: 30px;margin-left: 60px">
        <span style="line-height: 70px;font-family: '黑体', 'Heiti SC', sans-serif;font-weight: bold">我参加的比赛</span>
      </div>

      <div style="line-height: 70px;margin-left: 1100px" @click="backIndex">
        <span>回到首页</span>
      </div>
      <div style="line-height: 70px;margin-left: 5px" @click="goInfo">
        <span>| 个人信息</span>
      </div>
      <div style="line-height: 70px;margin-left: 5px" @click="quit">
        <span>| 退出</span>
      </div>
    </div>

    <div style="height: 60px;background-color: #9ac7f7"></div>

    <div style="display: flex">
      <!-- 左侧留白区域 -->
      <div style="min-height:720px;width: 200px;background-color: #9ac7f7;margin-top: 10px"></div>

      <!-- 比赛项目展示 -->
      <div style="min-height:720px;margin-top: 10px;width:1300px;display: flex;gap: 10px;flex-wrap: wrap;justify-content: center;">

        <!-- 个人赛展示 -->
        <div v-for="(item, index) in gerenList" :key="index">
          <el-card style="height: 200px;width: 500px;" class="dynamic-color-card">
            <el-descriptions title="参赛信息">
              <el-descriptions-item label="比赛项目:">{{ item.name }}</el-descriptions-item>
              <el-descriptions-item label="比赛地点:">{{ item.place }}</el-descriptions-item>
              <el-descriptions-item label="比赛时间:">{{ formatDate(item.eventTime) }}</el-descriptions-item>
              <el-descriptions-item label="赛事类型:">{{ item.type === '0' ? '个人赛' : '团体赛' }}</el-descriptions-item>
              <el-descriptions-item label="我的成绩:">{{ item.result || '成绩登记中' }}</el-descriptions-item>
              <el-descriptions-item label="得分:">
                <el-tag size="default" type="danger">{{ item.score !== null ? item.score : '成绩登记中' }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>

        <!-- 团队赛展示 -->
        <div v-for="(item, index) in teamList" :key="index">
          <el-card style="height: 200px;width: 500px;" class="dynamic-color-card">
            <el-descriptions title="参赛信息">
              <el-descriptions-item label="比赛项目:">{{ item.name }}</el-descriptions-item>
              <el-descriptions-item label="比赛地点:">{{ item.place }}</el-descriptions-item>
              <el-descriptions-item label="比赛时间:">{{ formatDate(item.eventTime) }}</el-descriptions-item>
              <el-descriptions-item label="赛事类型:">{{ item.type === '0' ? '个人赛' : '团体赛' }}</el-descriptions-item>
              <el-descriptions-item label="团队名称:">{{ item.tname }}</el-descriptions-item>
              <el-descriptions-item label="我的成绩:">{{ item.result || '成绩登记中' }}</el-descriptions-item>
              <el-descriptions-item label="得分:">
                <el-tag size="default" type="danger">{{ item.score !== null ? item.score : '成绩登记中' }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>

      </div>

      <!-- 右侧留白区域 -->
      <div style="min-height:720px;margin-top: 10px;width: 200px;background-color: #9ac7f7;"></div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  padding: 20px;
}

.dynamic-color-card {
  animation: colorChange 10s infinite;
  color: black; /* 字体颜色保持黑色，确保对比度 */
  transition: transform 0.3s ease; /* 添加平滑过渡效果 */

  /* 鼠标悬停时放大 */
  &:hover {
    transform: scale(1.10); /* 放大5% */
  }
}
</style>
